<template>
	<div class="wrap">
		<h2 class="title">留校申请管理</h2>

		<el-row>
			<el-col :span="5" :offset="18">
				<el-row :gutter="20">
					<el-col :span="14">
						<el-form-item label="寝室号:">
							<el-input v-model.number="roomId"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1">
						<el-button class="btn" @click="submitSearchStayForm">查询</el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>

		<HandleStaySchoolTable :apply="searchResult" @change="handleChange" :total="total"/>
	</div>
</template>

<script setup>
import HandleStaySchoolTable from '@/components/domi_admin/HandleStaySchoolTable.vue'
import { getRoomHolInfo } from '@/utils/axios/domiRequests'
import { useUserStore } from '@/stores/userStore'


const { userInfo } = useUserStore()

import { ref } from 'vue'
import { ElMessage } from 'element-plus';

const roomId = ref()
const total=ref(0)

const searchResult = ref()

const handleChange=({data,tota})=>{
	searchResult.value=data
	total.value=tota
}


const submitSearchStayForm = async () => {
  if(!roomId.value || !Number.isInteger(roomId.value)) {
    roomId.value=""
    return ElMessage.warning({message:"搜索非法条件",duration:1000})
  }
  if(roomId.value<0 || roomId.value>580){
    roomId.value=""
    return ElMessage.warning({message:"房间号非法",duration:1000})
  }
	let { data } = await getRoomHolInfo({ buildId: parseInt(userInfo.buildId), dorNumber: roomId.value })
	searchResult.value = data
	total.value=data?.length ??1
}
</script>

<style scoped lang="scss">
.el-tabs {
	height: 500px;
	&:deep(.el-tabs__content) {
		height: 500px;
	}
}
.el-input {
	width: 100px;
}

.btn {
	background: rgb(0, 202, 237);
	color: #ffff;
}
</style>
